<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>表单模板</title>
    <meta name="keywords" content="表单模板" />
    <meta name="description" content="表单模板" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./src/assets/favicon.ico" type="image/x-icon">
    <style type="text/css">
        body {
            margin:0;
            padding:0;
        }
        .top{
            position:fixed;
            top:0;
            padding:20px 0;
            width:100%;
            background:#f2f2f2;
        }
        .title{
            font-size:24px;
            text-align:center;
            line-height:2em;
            color:#333;
            font-weight:bold;
        }
        ul,li,p {
            list-style:none;
            margin:0;
            padding:0;
        }
        p {
            text-align:center;
            padding:10px 0;
        }
        p a {
            padding:0 10px;
            height:30px;
            display:inline-block;
            line-height:30px;
        }
        .centera {
            padding:20px 0;
        }
        .hover {
            background:#1296db;
            color:#fff;
        }
        #tablea {
            background:#eee;
        }
        .box {
            margin:10px;
            display:none
        }
        .box img{
            display:block;
            width:70%;
            height:auto;
            margin:0 auto;
        }
    </style>

</head>
<body style="">
    <div class="centera">
        <div class="top">
            <div class="title">
                应聘登记模板
            </div>
            <p id="oranger">
                <a class="hover" href="javascript:;">报名版</a>
                <a href="javascript:;">身份证解析版</a>
                <a href="javascript:;">临时工版</a>
                <a href="javascript:;">白领版</a>
                <a href="javascript:;">蓝领版</a>
                <a href="javascript:;">校园招聘版</a>
                <a href="javascript:;">极简版</a>
            </p>
        </div>
        <div id="tablea" class="tablea">
            <div class="box"><img src="./src/assets/images/moban1.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban2.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban3.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban4.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban5.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban6.jpg" alt=""/></div>
            <div class="box"><img src="./src/assets/images/moban7.jpg" alt=""/></div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        $(".tablea").find(".box:first").show();    //为每个BOX的第一个元素显示
        $("#oranger a").on("mouseover",function(){ //给a标签添加事件
            var index=$(this).index();  //获取当前a标签的个数
            $('#tablea').find(".box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示
            $(this).addClass("hover").siblings().removeClass("hover"); //a标签显示，同辈元素隐藏
        })
    })
</script>
</html>

